<template>
	<view>
		<view class="topview">
			<u-search searchIconSize="35" :showAction="true" placeholder="请输入企业信息" actionText="搜索" :animation="true">
			</u-search>
			<u-tabs :list="list1" @click="tabClick" :current="current" @change="tabChange" lineWidth="63px"
				lineColor="#1590EF" :activeStyle="{
					    color: '#1590EF',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					    color: '#606266',
					    transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
		</view>


		<view class="view_name">
			<view class="left_name">
				<text>{{listData.ownerName}}</text>
			</view>
			<view class="right_code">
				<canvas canvas-id="uqrcode"></canvas>
			</view>
		</view>
		<!-- 企业违章信息 -->
		<view style="padding-bottom: 20px;" v-if="current==1">
			<!-- 基本信息 -->
			<view class="list_item">
				<view class="item_top">
					<view class="view_pai">
						<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
						<text class="text_pai">基本信息</text>
					</view>
				</view>
				<view style="height: 1px;background-color: #ccc;"></view>
				<view class="item_bottom">
					<view class="bottom_text">
						<view class="text_left">经营状态</view>
						<view class="text_right">{{listData.state}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">企业地址</view>
						<view class="text_right">{{listData.ownerAddr}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">企业车辆数</view>
						<view class="text_right">{{listData.headNum}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">负责人姓名</view>
						<view class="text_right">{{listData.dealPrincipal}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">联系电话</view>
						<view class="text_right">{{listData.ptTel}}</view>
					</view>
				</view>
			</view>


			<view v-for="(item,index) in violationVOList" :key="index">



				<!-- 从业资格证信息 -->
				<view class="list_item">
					<view class="item_top">
						<view class="view_pai">
							<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
							<text class="text_pai">案件号{{item.caseNo}}</text>
						</view>
					</view>
					<view style="height: 1px;background-color: #ccc;"></view>
					<view class="item_bottom">
						<view class="bottom_text">
							<view class="text_left">违规类型</view>
							<view class="text_right">{{item.trafficType}}</view>
						</view>
						<view class="bottom_text">
							<view class="text_left">发生时间</view>
							<view class="text_right">{{item.trafficTime.split(' ')[0]}}</view>
						</view>
						<view class="bottom_text">
							<view class="text_left">违规行为</view>
							<view class="text_right">{{item.trafficEhavior}}</view>
						</view>
						<view class="bottom_text">
							<view class="text_left">结案情况</view>
							<view class="text_right">{{item.caseClosed}}</view>
						</view>
					</view>
				</view>
			</view>


		</view>

		<!-- 企业信息 -->
		<view style="padding-bottom: 20px;" v-if="current==0">
			<!-- 基本信息 -->
			<view class="list_item">
				<view class="item_top">
					<view class="view_pai">
						<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
						<text class="text_pai">基本信息</text>
					</view>
				</view>

				<view style="height: 1px;background-color: #ccc;"></view>
				<view class="item_bottom">
					<view class="bottom_text">
						<view class="text_left">经营状态</view>
						<view class="text_right">{{listData.state}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">企业地址</view>
						<view class="text_right">{{listData.ownerAddr}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">企业车辆数</view>
						<view class="text_right">{{listData.headNum}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">负责人姓名</view>
						<view class="text_right">{{listData.dealPrincipal}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">联系电话</view>
						<view class="text_right">{{listData.ptTel}}</view>
					</view>
				</view>
			</view>

			<view class="list_item">
				<view class="item_top">
					<view class="view_pai">
						<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
						<text class="text_pai">经营许可证信息</text>
					</view>
				</view>
				<view style="height: 1px;background-color: #ccc;"></view>
				<view class="item_bottom">
					<view class="bottom_text">
						<view class="text_left">经营许可证号</view>
						<view class="text_right">{{listData.mcertId}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">发证机关</view>
						<view class="text_right">{{listData.grantOrgan}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">有效期起</view>
						<view class="text_right">{{listData.firstDate}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">有效期止</view>
						<view class="text_right">{{listData.expireDate}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">核发日期</view>
						<view class="text_right">{{listData.beginDate}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">经营范围</view>
						<view class="text_right">{{listData.mgrArea}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">地点所在区划</view>
						<view class="text_right">{{listData.zipName}}</view>
					</view>
				</view>
			</view>


			<view class="list_item">
				<view class="item_top">
					<view class="view_pai">
						<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
						<text class="text_pai">质量信誉等级评定</text>
					</view>
				</view>
				<view style="height: 1px;background-color: #ccc;"></view>
				<view class="item_bottom">
					<view class="bottom_text">
						<view class="text_left">考核日期</view>
						<view class="text_right">{{listData.qualityAssessDate}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">考核结果</view>
						<view class="text_right">{{listData.qualityAssessResult}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">考评机构</view>
						<view class="text_right">{{listData.qualityAssessOrg}}</view>
					</view>
				</view>
			</view>

		</view>






	</view>
</template>

<script>
	import {
		getDetail,
		getAdministrative,
		staffLevel,
		getFirml
	} from '@/common/api/req.js'
	import {
		dateFormat
	} from "@/common/util.js"
	import uQRCode from '@/common/uqrcode.js' //引入uqrcode.js
	export default {
		data() {
			return {
				src1: "/static/index/tj_icon.png",
				list1: [{
					name: '企业信息',
				}, {
					name: '企业违章信息',
				}],
				current: 0,
				listData: {
					"id": "",
					"ownerId": "",
					"ownerName": "",
					"state": "",
					"ownerAddr": "",
					"headNum": "",
					"trailerNum": "",
					"dealPrincipal": "",
					"ptTel": "",
					"mcertId": "",
					"grantOrgan": "",
					"firstDate": "",
					"expireDate": "",
					"beginDate": "",
					"mgrArea": "",
					"zipCode": "",
					"zipName": "",
					"qualityAssessDate": "",
					"qualityAssessResult": "",
					"qualityAssessOrg": "",
					"violationVOList": ""
				},
				violationVOList: [],
				scoreType: [],
				uqrCodeType: 0,
				uqrCodeList: [{
					color: '#409EFF',
					text: '蓝码'
				}, {
					color: '#FFD04D',
					text: '黄码'
				}, {
					color: '#F56C6C',
					text: '红码'
				}],


			};
		},
		onLoad(option) {
			Object.assign(this.listData, JSON.parse(option.data))
			this.violationVOList = this.listData.violationVOList
			// this.listData =   
			// console.log(this.listData, 'option.data=============')
		},
		mounted() {
			getDetail('owner_state').then(res => {
				res.data.data.map(item => {
					if (item.dictKey == this.listData.state) {
						this.listData.state = item.dictValue
					}
				})

			})

			getAdministrative(this.listData.zipCode).then(rst => {
				this.listData.zipName = rst.data.data.name
			})

			staffLevel(1).then(res => {
				const resData = res.data.data;
				this.scoreType = []
				resData.forEach(item => {
					this.scoreType.push(item.minScore);
				})
				return getFirml({
					archiveCode: this.listData.mcertId,
				})
			}).then(res => {
				const resData = res.data.data;
				if (resData.length) {
					const qrData = {
						// uid: this.listData.idCard,
						id: resData[0].id,
						// archiveCode: resData[0].archiveCode,
						// archiveName: resData[0].archiveName,
						evalSection: resData[0].evalSection,
						levels: resData[0].levels,
						score: resData[0].score,
						datetime: dateFormat(),
					}
					this.uqrCodeType = this.getScoreType(qrData.score)
					this.qrFun(JSON.stringify(qrData)); //调用生成二维码方法
					this.timer = setInterval(() => {
						this.datetime = dateFormat();
					})
				}
			}).then(res => {
				// this.waybillList = res.data.data;
			})
		},
		methods: {
			tabClick() {},
			tabChange(e) {
				this.current = e.index
			},
			getScoreType(score) {
				for (var i = 0; i < this.scoreType.length; i++) {
					if (score >= this.scoreType[i]) {
						return i;
					}
				}
				return -1;
			},
			qrFun(text) {
				uQRCode.make({
					canvasId: 'uqrcode',
					componentInstance: this,
					text: text,
					size: 85,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: this.uqrCodeList[this.uqrCodeType].color,
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						// console.log(res);
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EFEFEF;
	}

	.topview {
		padding: 15px 15px 0px 15px;
		background-color: #fff;
		position: sticky;
		z-index: 999;
		top: 0;


		.u-search__content {
			padding: 5px 10px;
		}
	}



	.list_item {
		border-radius: 10px;
		background-color: #FFFFFF;
		margin: 10px 20px 0 20px;
		padding-bottom: 5px;



		.item_top {
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			border-radius: 10rpx;

			.view_pai {
				padding-left: 30rpx;
				height: 40rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;

				.text_pai {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.view_state {
				height: 50rpx;
				border-top-right-radius: 10rpx;
				border-bottom-left-radius: 8rpx;
				padding-left: 5rpx;
				padding-right: 5rpx;
				background-color: #666666;
				display: flex;
				align-items: center;

				.text_state {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

		}

		.item_line {
			height: 1rpx;
			background-color: #F2F2F2;
			margin-left: 35rpx;
			margin-right: 35rpx;
		}

		.item_center {
			display: flex;
			flex-direction: column;
			padding-left: 35rpx;
			padding-top: 20rpx;
			padding-bottom: 10rpx;

			.center_top {
				display: flex;
				height: 50rpx;
				align-items: center;

				.view_jia {
					width: 45rpx;
					height: 45rpx;
					background-color: #4CAF50;
					border-radius: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						color: #FFFFFF;
						font-size: 20rpx;
						font-weight: 700;
					}
				}

				.view_ya {
					width: 45rpx;
					height: 45rpx;
					background-color: #2196F3;
					border-radius: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						color: #FFFFFF;
						font-size: 20rpx;
						font-weight: 700;
					}
				}

				.text_name {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-weight: 700;
				}

				.text_phone {
					margin-left: 30rpx;
					font-size: 28rpx;
					font-weight: 700;
					color: #666666;
				}
			}

			.center_line {
				margin-left: 22rpx;
				height: 15rpx;
				width: 5rpx;
				background-color: #000000;
			}

		}

		.item_bottom {
			display: flex;
			flex-direction: column;
			padding-left: 35rpx;
			padding-top: 10px;

			.bottom_text {
				display: flex;
				align-items: center;
				padding-top: 10rpx;
				padding-bottom: 10rpx;

				.text_left {
					font-size: 30rpx;
					color: #666666;
					width: 120px;
				}

				.text_right {
					flex: 1;
					font-size: 30rpx;
					display: inline-block;
					// white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis;
				}

			}
		}
	}


	.view_name {
		// width: calc(100% - 40px);
		height: 90px;
		display: flex;
		padding: 10px;
		background-color: #fff;
		margin: 10px 20px;
		border-radius: 10px;

		.left_name {
			width: 69%;

			// line-height: 90px;
			display: inline-block;
			border-right: 1px #1590EF solid;
			margin: 0 20px 0 0;

			text {
				color: #1590EF;
				font-size: 20px;
				display: inline-block;
				margin-top: 10%;
			}
		}

		.right_code {
			width: 30%;
		}

	}
</style>
